<template>
	<view class="app-user-wallet e-p-l-20 e-p-r-20 e-p-t-20" :style="[AppSkinVar]">
		<view class="app-user-wallet__header e-rela bg-white e-m-b-20 e-radius-20 overflow-hidd">
			<view class="e-p-t-44 e-p-l-30 e-p-r-30 e-flex e-flex-between e-m-b-44">
				<view class="e-flex">
					<text class="e-font-32 fw-600 e-p-r-20">{{ $t('user.我的资产') }}</text>
					<e-icon :name="eyeIconName" size="32rpx" color="#333" customStyle="line-height: 32rpx" @click="handlePasswordTypeChange"></e-icon>
				</view>
				<view class="e-flex">
					<view class="e-m-r-20">
						<e-button
							:color="AppSkin.primary"
							shape="circle"
							size="small"
							customStyle="width:122rpx;height:48rpx"
							:text="$t('user.充值')"
							@click="$goTo('/pages/systemPay/wallet/recharge')"
						></e-button>
					</view>
					<e-button
						:color="AppSkin.primary"
						shape="circle"
						plain
						size="small"
						customStyle="width:122rpx;height:48rpx"
						:text="$t('user.提现')"
						@click="$goTo('/pages/user/wallet/extract/index')"
						v-if="hasExtract"
					></e-button>
				</view>
			</view>
			<view class="e-flex text-center e-m-b-40">
				<view class="e-flex-2">
					<view class="e-m-b-14">
						<text class="e-font-44 fw-500 c-primary">{{ account ? (eyeIconName === 'eye-fill' ? account.money : '******') : 0 }}</text>
					</view>
					<view class="e-flex-xy-center" @tap="$goTo('/pages/user/wallet/details', { id: account.strategy || '', type: 'Y', isFrozen: '0' })">
						<text class="c-regular e-font-24 e-line-h-34 e-p-r-8">{{ $t('user.可用余额') }}({{ $unitEn }})</text>
						<view class="e-m-l-8 e-flex">
							<app-image src="classify/arrow-right.png" size="32rpx"></app-image>
						</view>
					</view>
				</view>
				<view class="e-flex-2">
					<view class="e-m-b-14">
						<text class="e-font-44 fw-500 c-primary">{{ account ? (eyeIconName === 'eye-fill' ? account.frozenMoney : '******') : 0 }}</text>
					</view>
					<view class="e-flex-xy-center" @tap="$goTo('/pages/user/wallet/details', { id: account.strategy || '', type: 'Y', isFrozen: '1' })">
						<text class="c-regular e-font-24 e-line-h-34 e-p-r-8">{{ $t('user.冻结余额') }}({{ $unitEn }})</text>
						<view class="e-m-l-8 e-flex">
							<app-image src="classify/arrow-right.png" size="32rpx"></app-image>
						</view>
					</view>
				</view>
			</view>
			<e-line color="#F7F7F7"></e-line>
			<view class="e-flex text-center e-p-t-32">
				<view class="e-flex-2 e-flex-xy-center" @tap="$goTo('/pages/user/wallet/history')">
					<view class="e-m-r-10 e-flex">
						<app-image src="user/wallet_icon.png" size="36rpx"></app-image>
					</view>
					<text>{{ $t('user.提现记录') }}</text>
				</view>
				<view class="e-flex-2 e-flex-xy-center" @tap="$goTo('/pages/user/wallet/details', { id: account.strategy || '', type: 'Y', isFrozen: '0' })">
					<image class="img-36 e-m-r-10" src="/pages/user/static/icon3.png"></image>
					<text>{{ $t('user.资金明细') }}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="getList" lower-threshold="60">
			<empty v-if="isEmpty" paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')"></empty>
			<template v-else>
				<recordCard :primary="AppSkin.primary" v-for="item in list" :infoSymbol="item.isout == 1" :status="item.isout == 0" :key="item.id" :info="item"></recordCard>
				<load-more :showLoad="showLoad"></load-more>
			</template>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getFundDetailsList,getExtractRule } from '@/common/request/api';
import recordCard from './child/record-card.vue';
import { useQueryPage } from '@/common/hooks';
import { useUser } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { onLoad ,onShow} from '@dcloudio/uni-app';

const userStore = useUser();
const { defaultAccount: account } = storeToRefs(userStore);

const eyeIconName = ref('eye-fill');
const handlePasswordTypeChange = () => {
	if (eyeIconName.value === 'eye-off') {
		eyeIconName.value = 'eye-fill';
	} else {
		eyeIconName.value = 'eye-off';
	}
};

const { showLoad, isEmpty, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: getFundDetailsList
});

const getList = () => {
	handleQueryPage({ strategy: account.value?.strategy });
};

watch(account, (v) => {
	v?.strategy && handleRefresh({ strategy: account.value?.strategy });
});
const hasExtract = ref(false)
onLoad(() => {
	userStore.getAccountList();
	
	getExtractRule().then(res => {
		hasExtract.value = res.data.isopen !== -1
	})
});
onShow(() => {
	account.value?.strategy && handleRefresh({ strategy: account.value?.strategy });
})
</script>
<style lang="scss" scoped>
@include appBem_b(user-wallet) {
	@include appBem_e(header) {
		height: 386rpx;
	}
	scroll-view {
		height: calc(100vh - 426rpx);
	}
}
</style>
